<template>
	<view class="u-padding-bottom-30">
		<c-navbar />
		<view class="company">
			<view class="u-flex">
				<view class="company-name">
					<text>天津盛世恒丰科技有限公司</text>
				</view>
				<view class="company-status">
					<image src="@/static/img/member.png"></image>
					<view class="u-margin-left-8">已认证</view>
				</view>
			</view>
			<view class="company-bill">
				<navigator url="/pages/repayment/index" hover-class="none">
					<view class="company-bill_money u-flex">
						<view class="u-font-40 u-margin-right-4">{{arrears.repaymentAmount | thousands}}</view>
						<view class="u-font-24">￥</view>
					</view>
					<view class="company-bill_remark u-flex">
						<view class="u-margin-right-6">需还款金额</view>
						<image src="@/static/img/icon_arrow_fill@2x.png"></image>
					</view>
				</navigator>
				<view class="company-bill_line"></view>
				<navigator url="/pages/bill/index" hover-class="none">
					<view class="company-bill_money u-flex">
						<view class="u-font-40 u-margin-right-4">{{arrears.billAmount | thousands}}</view>
						<view class="u-font-24">￥</view>
					</view>
					<view class="company-bill_remark u-flex">
						<view class="u-margin-right-6">待支付账单金额</view>
						<image src="@/static/img/icon_arrow_fill@2x.png"></image>
					</view>
				</navigator>
			</view>
		</view>

		<view class="details-body">
			<view class="credit-title_bg" :style="{
				'background-image': `url(${require('@/static/img/credit-title_bg.png')})`
			}">
				授信贷款
			</view>
			<!-- 授信 -->
			<view class="credit">
				<navigator url="/pages/creditGrantingList/index" hover-class="none" class="credit-item">
					<image src="@/static/img/icon-shouxin@2x.png"></image>
					<view class="u-text-center">授信</view>
				</navigator>
				<navigator url="/pages/repayment/index" hover-class="none" class="credit-item">
					<image src="@/static/img/icon-huankuan@2x.png"></image>
					<view class="u-text-center">还款</view>
				</navigator>
				<navigator url="/pages/earnestMoney/index"  class="credit-item">
					<image src="@/static/img/icon-baozhengjin@2x.png"></image>
					<view class="u-text-center">保金</view>
				</navigator>
			</view>
			<u-line color="#F2F2F2" />
			<!-- 出口管理 -->
			<view class="exit">
				<view class="exit-title">出口管理</view>
				<view class="exit-content">
					<navigator url="/pages/carList/index" class="exit-content_left">
						<image class="vehicle-record" src="@/static/img/vehicle-record@2x.png"></image>
					</navigator>
					<view class="exit-content_right">
						<navigator url="/pages/salesApply/index">
							<image class="application-sales" src="@/static/img/application-sales@2x.png"></image>
						</navigator>
						<navigator url="/pages/exportApply/index">
							<image class="application-export" src="@/static/img/application-export.png"></image>
						</navigator>
					</view>
				</view>
			</view>
			<!-- 账单与结算 -->
			<view class="settlement">
				<view class="settlement-title">账单与结算</view>
				<navigator url="/pages/carList/index" class="vehicle-details">
					<image src="@/static/img/vehicle-details.png"></image>
				</navigator>
				<view class="u-flex u-row-between">
					<navigator url="/pages/settlement/index" class="settlement-car">
						<image src="@/static/img/settlement-car.png"></image>
					</navigator>
					<navigator url="/pages/taxRefund/index" class="settlement-tax">
						<image src="@/static/img/settlement-tax.png"></image>
					</navigator>
				</view>
			</view>
			<!-- 其他 -->
			<!-- -->
			<!--  -->
			<view class="others">
				<view class="others-title">其他</view>
				<view class="u-flex u-row-between">
					<navigator url="/pages/sendApply/index" class="record-shipment">
						<image src="@/static/img/record-shipment.png"></image>
					</navigator>
					<navigator url="/pages/pickUpApply/index" class="record-pickup">
						<image src="@/static/img/record-pickup.png"></image>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import cNavbar from './components/c-navbar.vue'
	export default {
		components: {
			cNavbar
		},
		data() {
			return {
				arrears:{
					billAmount:0,
					repaymentAmount:0
				}
			}
		},
		onShow() {
			this.getHomeArrears()
		},
		methods:{
			getHomeArrears(){
				this.$api.getHomeArrears().then(res=>{
					this.arrears = res.result
				})
			}
		}
	}
</script>
<style scoped lang="less">
	@import url('./components/index.less');
</style>
<style>
	page {
		background-color: #F7F7F7;
	}
</style>